<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>帮助内容列表</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp" %>
    <script type="text/javascript">
        var _ctx = '${ctx}';
        var _staticPath = '${staticPath}';
    </script>
    <%--select--%>
    <link rel="stylesheet" type="text/css" href="${staticPath}/select/css/bootstrap-drilldown-select.css">
    <%--select--%>
    <%--select--%>
    <script src="${staticPath}/select/js/bootstrap-drilldown-select.js"></script>
    <script src="${staticPath}/admin/tcsf/wg_listToTree1.1.js"></script>
    <%--select--%>
    <style>
        body.dragging, body.dragging * {
            cursor: move !important;
        }

        .dragged {
            position: absolute;
            opacity: 0.5;
            z-index: 2000;
        }

        ol.example li.placeholder {
            position: relative;
            /** More li styles **/
        }

        ol.example li.placeholder:before {
            position: absolute;
            /** Define arrowhead **/
        }

        .dropdown-menu {
            z-index: 99999999999 !important;
        }
    </style>
</head>
<body>

<div class="tpanel">
    <div class="panel-content">
        <div class="container-fluid">
            <div id="tool">
                <form id="searchForm" class="form-inline" onsubmit="return search('#searchForm','#table')" style="margin-top:20px;margin-bottom:20px;">
                    <div>
                        <div class="form-group">
                            <label class="">标题：</label>
                            <input type="text" name="search_LIKES_title" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label class="">作者：</label>
                            <input type="text" name="search_LIKES_author" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary radius">
                                <span class="glyphicon glyphicon-search"></span> 查询
                            </button>
                            <a class="btn btn-success radius" href="${ctx}/admin/helparticle/create">
                                <span class="glyphicon glyphicon-cog"></span> 创建
                            </a>
                            <a class="btn btn-success radius" onclick="articleSort()">
                                <span class="glyphicon glyphicon-cog"></span> 内容排序
                            </a>
                        </div>
                        <div class="form-group">
                            <a href="javascript:expand()">更多搜索条件</a>
                        </div>
                    </div>
                    <div id="search-more" style="padding: 15px;display: none">
                        <div class="form-group">
                            <label class="col-sm-3" style="line-height: 29px">分类：</label>
                            <div class="col-sm-8 ">
                                <input id="drilldown1" class="form-control" placeholder="请选择分类"
                                       data-toggle="dropdown" readonly="readonly">
                                <input id="parentId" class="hidden" name="search_LIKES_catalogId">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <table id="table"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    window.parent.changeTitle('帮助内容列表');

    $(function () {

        $.getJSON('${ctx}/admin/helparticlecatalog/list', function (result) {
            if (result.code == 'OK') {
                fillData(result.body);
            }
        });

        $('.form_datetime').datetimepicker({
            language: 'zh-CN',
            autoclose: true
        });
        $('#table').bootstrapTable({
            url: '${ctx}/admin/helparticle/page-list?sort=sort&order=asc',
            idField: 'id',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 25,
            sidePagination: 'server',
            uniqueId: 'id',
            queryParams: queryParams,
            responseHandler: responseHandler,
            columns: [/*{
                field: 'ck',
                checkbox : true
            },*/
                {
                    title: '#',
                    width: 50,
                    align: 'center',
                    formatter: snFormatter
                },
                {
                    field: 'title',
                    title: '标题',
                    align: 'center'
                }, {
                    field: 'catalog',
                    title: '类别',
                    align: 'center'
                },
                {
                    field: 'author',
                    title: '作者',
                    align: 'center'
                },
                {
                    field: 'op',
                    title: '操作',
                    align: 'center',
                    formatter: operateFormatter
                }]
        });

    });

    function del(id, name) {
        window.parent.bootbox.prompt({
            title: "请输入您的管理密码以确定删除此系统资源",
            onEscape: true,
            backdrop: true,
            animate: true,
            buttons: {
                confirm: {
                    label: '删除',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '取消',
                    className: ''
                }
            },
            inputType: 'password',
            callback: function (result) {
                if (result) {
                    $.post('${ctx}/admin/helparticle/careful-delete', {id: id, password: result}, function (resp) {
                        if (resp.code == 'OK') {
                            window.parent.layer.msg('删除成功', {icon: 1});
                            $('#table').bootstrapTable('refresh');
                        } else {
                            window.parent.layer.msg('删除失败:' + resp.message, {icon: 2});
                        }
                    }, 'json');
                }
            }
        });
    }

    function operateFormatter(value, row, index) {
        var content = '<a title="查看详情" href="javascript:detail(' + row.id + ')"><i class="iconfont icon-caidanguanli"></i></a>';
        content += '&nbsp;&nbsp;&nbsp;&nbsp;';
        content += '<a href="${ctx}/admin/helparticle/update?id=' + row.id + '" title="编辑"><i class="iconfont icon-iconfontcolor32"></i></a>';
        content += '&nbsp;&nbsp;&nbsp;&nbsp;';
        content += '<a href="javascript:del(' + row.id + ')" title="删除"><i class="iconfont icon-shanchu"></i></a>';
        return content;
    }

    function detail(id) {
        window.parent.layer.open({
            type: 2,
            title: '查看详情',
            shadeClose: true,
            shade: [0.5, '#000'],
            area: ['800px', '500px'],
            content: '${ctx}/admin/helparticle/detail?id=' + id
        });
    }

    function articleSort() {
        topLayer.open({
            type: 2,
            title: '内容排序',
            shadeClose: true,
            shade: [0.5, '#000'],
            area: ['500px', '500px'],
            content: '${ctx}/admin/helparticle/articleSort',
            end: function () {
                //location.reload();
            }
        });
    }

    function expand() {
        if ($('#search-more').css("display") === "block") {
            $('#search-more').css("display", "none");
        } else {
            $('#search-more').css("display", "block");
        }
    }

    function fillData(data) {
        var param = {
            list: data,
            inParams: {
                pid: "parentId",
                rootId: null,
                id: 'id'
            },
            outParams: {
                children: "list",
                pid: "pid",
                id: 'id'
            },
            sort: {
                orderBy: ["sort"],
                sort: "asc"
            }
        };
        var tree = wg_listToTree(param);
        console.log(tree);
        $('#drilldown1').drilldownSelect({
            appendValue: false,
            data: tree,
            onSelected: function (event) {
                $('#parentId').val($(event.target).data('id'));
                $('#drilldown1').val(event.target.innerHTML);
            }
        });
    }

</script>

</body>
</html>
